heatMap("./res/heatmap.json",'2021-4-1');
// 功能：读取数据
// 参数：路径，时间（天）
// 返回：null
function heatMap(path, date){
    //$ajax()获取文件
    $.ajax({
        url: path,
        dataType: 'json'
    }).then(function (heatmapData){
        drawHeatMap(heatmapData.data==null?heatmapData:heatmapData.data, date);
    })

    //D3.csv()函数读取本地文件
    // d3.json(path, function (heatmapData){
    //     drawHeatMap(heatmapData);
    // })
}

// 功能：绘制热力地图
// 参数：热力地图数据
// 返回：null
function drawHeatMap(heatmapData,date){
    var map = new AMap.Map('container', {
        viewMode: '3D',
        center: [115.985371, 36.456703],
        resizeEnable: true,
        pitch: 50,
        mapStyle: 'amap://styles/grey'
    });

    var max = heatmapData[heatmapData.length-1];
    var min = heatmapData[0];
    var gridLayer;
    var height = 50000;
    var viewMode = '3D';

    initPointAdcode();
    function initPointAdcode() {
        gridLayer = new Loca.GridLayer({
            map: map,
            visible: true,
            zIndex: 777,
            eventSupport: true
        });

        gridLayer.setData(heatmapData, {
            type: 'json',
            lnglat: function (obj) {
                var lng = obj.value.jd;
                var lat = obj.value.wd;
                return [+lng, +lat];
            },
            value: 'count'
        });
        
       

        gridLayer.setOptions({
            unit: 'meter',
            mode: 'sum',
            light: {
                // 环境光
                ambient: {
                    // 光照颜色
                    color: '#ffffff',
                    // 光照强度，范围 [0, 1]
                    intensity: 0.7
                },
                // 平行光
                directional: {
                    color: '#ffffff',
                    // 光照方向，是指从地面原点起，光指向的方向。
                    // 数组分别表示 X 轴、Y 轴、Z 轴。
                    // 其中 X 正向朝东、Y 正向朝南、Z 正向朝地下。
                    direction: [0, -1, 0.6],
                    intensity: 0.7
                }
            },
            style: {
                radius: 110,
                gap: 900,
                height: [0, height],
                opacity: 1,
                color: {
                    scale: 'quantize',
                    value: ['rgb(25,25,112)', 'rgb(49,54,149)', 'rgb(69,117,180)', 'rgb(153,213,148)', 'rgb(230,245,152)', 'rgb(255,255,191)', 'rgb(254,224,144)', 'rgb(244,109,67)','rgb(215,48,39)','rgb(165,0,38)'],
                    // value: ['rgb(255,237,160)', 'rgb(254,217,118)', 'rgb(254,178,76)', 'rgb(253,141,60)', 'rgb(252,78,42)', 'rgb(255,0,0)','rgb(227,26,28)', 'rgb(189,0,38)', ],

                }
            }
        }).render();
        gridLayer.setFitView();
        
        //
        var $maxName = document.getElementById('maxName');
        $maxName.innerText = "【" +heatmapData[heatmapData.length-1].name+'】';
        var $max = document.getElementById('max');
        $max.innerText = max.count;

        var $secondName = document.getElementById('secondName');
        $secondName.innerText = "【" +heatmapData[heatmapData.length-2].name+'】';
        var $second = document.getElementById('second');
        $second.innerText = heatmapData[heatmapData.length-2].count;

        var $thirdName = document.getElementById('thirdName');
        $thirdName.innerText = "【" +heatmapData[heatmapData.length-3].name+'】';
        var $third = document.getElementById('third');
        $third.innerText = heatmapData[heatmapData.length-3].count;

        // 事件 legendupdate: 图例数据更新完成回调此函数
        gridLayer.on('legendupdate', function (ev) {
            var colorLegend = ev.colorLegend;
            var legends = colorLegend.map(item => {
                // color 为 gradient 传入的格式
                return `<li class="color-item" style="background-color: ${item.color}"></li>`
            });

            var ranges = colorLegend.map((item, index) => {
                // range 可能为小数，可以自行取整计算
                item.range[0] = index*800;
                item.range[1] = (index+1)*800;

                if (index == colorLegend.length - 1) {
                    return `<li class="label-item" style="color: #FFFFFF">${item.range[0]}</li><li class="label-item" style="color: #FFFFFF">${item.range[1]}</li>`;
                }
                return `<li class="label-item" style="color: #FFFFFF">${item.range[0]}</li>`;
            });

            document.getElementById('legend-color').innerHTML = legends.join('');
            document.getElementById('legend-label').innerHTML = ranges.join('');
        });

        gridLayer.on('mousemove', function (ev) {
            var $val = document.getElementById('val');
            $val.innerText = '【'+ev.rawData[0].name + '】';
            var $trafficFlow = document.getElementById('trafficFlow');
            $trafficFlow.innerText = " "+ev.rawData[0].count;
        });

        gridLayer.on('click', function (ev) {
            var yearandMonthandDay = date;
            year = yearandMonthandDay.split("-")[0];
            month = yearandMonthandDay.split("-")[1];
            day = yearandMonthandDay.split("-")[2];
            var siteName = ev.rawData[0].name;
            
            //调用函数绘制桑基图
            ankey_url = `http://192.168.1.103:8080/vis/bayonetData/sankey?year=${year}&month=${month}&day=${day}&name=${siteName}`;
            ankey(ankey_url);

        });
    
    }


    // 高度切换
    function onHeight() {
        var heightBtn = document.querySelector('#heightBtn');

        heightBtn.onclick = function () {
            viewMode = viewMode === '2D' ? '3D' : '2D';
            heightBtn.innerHTML = viewMode;

            gridLayer.setOptions({
                style: {
                    height: [0, viewMode === '2D' ? 0 : height],
                }
            }).render();
        }
    }
    onHeight();
}


function handleMaxSite(){
    let siteName=document.getElementById("maxName").innerText;
    siteName = siteName.replace("【",'');
    siteName = siteName.replace("】",'');
    let systemDate = document.getElementById("myDate").value;
    let year = systemDate.split("-")[0];
    let month = parseInt(systemDate.split("-")[1]);
    let day = parseInt(systemDate.split("-")[2]);
    let date = year+'-'+month+'-'+day
    
    //调用函数绘制桑基图
    ankey_url = `http://192.168.1.103:8080/vis/bayonetData/sankey?year=${year}&month=${month}&day=${day}&name=${siteName}`;
    ankey(ankey_url);
}

function handleSecondSite(){
    var siteName=document.getElementById("secondName").innerText;
    siteName = siteName.replace("【",'');
    siteName = siteName.replace("】",'');
    let systemDate = document.getElementById("myDate").value;
    let year = systemDate.split("-")[0];
    let month = parseInt(systemDate.split("-")[1]);
    let day = parseInt(systemDate.split("-")[2]);
    let date = year+'-'+month+'-'+day
    
    //调用函数绘制桑基图
    ankey_url = `http://192.168.1.103:8080/vis/bayonetData/sankey?year=${year}&month=${month}&day=${day}&name=${siteName}`;
    ankey(ankey_url);
}

function handleThirdSite(){
    var siteName=document.getElementById("thirdName").innerText;
    siteName = siteName.replace("【",'');
    siteName = siteName.replace("】",'');
    let systemDate = document.getElementById("myDate").value;
    let year = systemDate.split("-")[0];
    let month = parseInt(systemDate.split("-")[1]);
    let day = parseInt(systemDate.split("-")[2]);
    let date = year+'-'+month+'-'+day
    
    //调用函数绘制桑基图
    ankey_url = `http://192.168.1.103:8080/vis/bayonetData/sankey?year=${year}&month=${month}&day=${day}&name=${siteName}`;
    ankey(ankey_url);
}


